<template>
	<view class="auditor-filter" :style="{'--navBarHeight': `${navBarHeight}px`}" @touchmove.prevent.stop>
		<view class="placeholder-view" @click="onClose"></view>
		<view class="scroll-view">
			<scroll-view scroll-y scroll-anchoring class="scroll-content">
				<view style="height: 1upx;"></view>
				<view class="cell-view">
					<view class="label-view">
						<view>约定回报(年化）</view>
						<view class="unit-text">单位：%</view>
					</view>
					<view v-if="formData.DEFINITE_RETURN && formData.DEFINITE_RETURN.length" class="slider-content">
						<jxs-slider v-model="formData.earningsRate" ref="earningsRate" :height="7"
							:min="formData.DEFINITE_RETURN[0]"
							:max="formData.DEFINITE_RETURN[formData.DEFINITE_RETURN.length - 1]" :blockWidth="29"
							inactiveColor="#F1E6DF" desc="不限" activeColor="#FF442F" :moveHeight="100"></jxs-slider>
						<view class="slider-list">
							<view v-for="(item, index) in formData.DEFINITE_RETURN" :key="index" class="slider-item">
								{{formData.DEFINITE_RETURN.length - 1 == index ? '不限' : item}}
							</view>
						</view>
					</view>
				</view>
				<view class="cell-view">
					<view class="label-view">
						<view>出资金额</view>
						<view class="unit-text">单位：万元</view>
					</view>

					<view v-if="formData.AMOUNT_OF_INVESTMENT && formData.AMOUNT_OF_INVESTMENT.length"
						class="slider-content">
						<jxs-slider v-model="formData.amount" ref="amount" :height="7"
							:min="formData.AMOUNT_OF_INVESTMENT[0]"
							:max="formData.AMOUNT_OF_INVESTMENT[formData.AMOUNT_OF_INVESTMENT.length - 1]"
							:blockWidth="29" inactiveColor="#F1E6DF" desc="不限" activeColor="#FF442F"
							:moveHeight="100"></jxs-slider>
						<view class="slider-list">
							<view v-for="(item, index) in formData.AMOUNT_OF_INVESTMENT" :key="index"
								class="slider-item">
								{{formData.AMOUNT_OF_INVESTMENT.length - 1 == index ? '不限' : item}}
							</view>
						</view>
					</view>

				</view>
				<view class="cell-view">
					<view class="label-view">项目类型</view>
					<view class="cell-list">
						<view v-for="(item, index) in projectTypeList" @click="onProjectTypeEvent(item)" :key="index"
							class="item-view"
							:class="{'item-active': formData.projectTypeIdList.some(s => s == item.projectTypeId)}">
							<image v-if="formData.projectTypeIdList.some(s => s == item.projectTypeId)"
								src="/static/filter-checkbox-icon.png" class="checkbox"></image>
							<view>{{item.name}}</view>
						</view>
					</view>
				</view>
				<view class="cell-view">
					<view class="label-view">项目状态</view>
					<view class="cell-list">
						<view v-for="(item, index) in projectStateList" @click="onProjectStateEvent(item)" :key="index"
							class="item-view" :class="{'item-active': formData.statusList.some(s => s == item.value)}">
							<image v-if="formData.statusList.some(s => s == item.value)"
								src="/static/filter-checkbox-icon.png" class="checkbox"></image>
							<view>{{item.name}}</view>
						</view>
					</view>
				</view>
				<view style="height: 100upx;"></view>
			</scroll-view>
			<view class="button-view">
				<view class="button-item" @click="onReset">重置</view>
				<view class="button-item button-active" @click="onSubmit">确定</view>
			</view>
		</view>
	</view>
	</view>
</template>

<script>
	export default {

		name: "AuditorFilter",
		props: {
			value: Object,
			status: {
				type: String,
				default: '1'
			}
		},
		data() {
			return {
				navBarHeight: uni.getSystemInfoSync().statusBarHeight + 44,
				projectTypeList: [],
				projectStateList: [{
						name: '招募中',
						value: '20'
					},
					{
						name: '待招募',
						value: '30'
					},
					{
						name: '招募结束',
						value: '40'
					}
				],
				formData: {
					DEFINITE_RETURN: [], // 约定回报年化 筛选区间
					AMOUNT_OF_INVESTMENT: [], // 约定回报年化 筛选区间
					earningsRate: [0, 0], // 约定回报（年化） 最小 最大
					amount: [0, 0], // 出资金额 最小 最大
					projectTypeIdList: [], // 项目类型idList
					statusList: [], // 项目状态List
					minInitialDeliveryAmount: '', //出资金额 最小
					maxInitialDeliveryAmount: '', //出资金额 最大
					minEarningsRate: '', //约定回报（年化） 最小
					maxEarningsRate: '', //约定回报（年化） 最大
				}
			};
		},
		beforeMount() {
			this.getConfig('DEFINITE_RETURN')
			this.getConfig('AMOUNT_OF_INVESTMENT')
			this.getProjectTypeList()
			this.formData.amount = [this.value.minInitialDeliveryAmount || 0, this.value.maxInitialDeliveryAmount || 0]
			this.formData.earningsRate = [this.value.minEarningsRate || 0, this.value.maxEarningsRate || 0]
			this.formData.projectTypeIdList = this.value.projectTypeIdList
			this.formData.statusList = this.value.statusList
		},
		methods: {
			onProjectTypeEvent(item) {
				const index = this.formData.projectTypeIdList.findIndex(f => f == item.projectTypeId)
				if (index == -1) return this.formData.projectTypeIdList.push(item.projectTypeId)
				this.formData.projectTypeIdList.splice(index, 1)
			},
			onProjectStateEvent(item) {
				const index = this.formData.statusList.findIndex(f => f == item.value)
				if (index == -1) return this.formData.statusList.push(item.value)
				this.formData.statusList.splice(index, 1)
			},
			async getConfig(configKey) {
				const res = await uni.$api.getConfig(configKey)
				this.formData[configKey] = JSON.parse(res.data.value)
			},
			async getProjectTypeList() {
				const res = await uni.$api.getProjectTypeList()
				this.projectTypeList = res.data
			},
			onClose() {
				this.$emit('close')
			},
			onReset() {
				this.formData.projectTypeIdList = []
				this.formData.statusList = []
				this.formData.earningsRate = [0, 0]
				this.formData.amount = [0, 0]
				this.$refs['earningsRate'].updateValue(0, 0, false);
				this.$refs['amount'].updateValue(0, 0, false);
			},
			onSubmit() {
				const [minRate, maxRate] = this.formData.earningsRate
				const [minAmount, maxAmount] = this.formData.amount
				this.formData.minInitialDeliveryAmount = minAmount || ''
				this.formData.maxInitialDeliveryAmount = maxAmount || ''
				this.formData.minEarningsRate = minRate || ''
				this.formData.maxEarningsRate = maxRate || ''
				this.$emit('change', this.formData)
			}
		}
	}
</script>

<style scoped lang="scss">
	.auditor-filter {
		width: 100%;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 19;
		@extend .row-between;
		padding-top: var(--navBarHeight);

		.placeholder-view {
			width: 173upx;
			height: 100%;
			background: rgba(6,0,0,0.9);
		}

		.scroll-view {
			width: calc(100% - 173upx);
			height: 100%;
			background: rgba(255, 255, 255, 0.9);
			backdrop-filter: blur(4px);

			.scroll-content {
				width: 100%;
				height: calc(100% - 166upx);
				padding-top: 45upx;

				.cell-view {
					width: 100%;
					padding: 0 32upx;

					.label-view {
						width: 100%;
						font-size: 27rpx;
						color: #2C1101;
						@extend .row-between;

						.unit-text {
							font-size: 22rpx;
							color: #69442E;
						}
					}

					.cell-list {
						width: calc(100% + 20upx);
						@extend .row-start;
						flex-wrap: wrap;
						margin-left: -20upx;
						margin-top: 7upx;

						.item-view {
							width: 159rpx;
							height: 72rpx;
							border-radius: 7rpx;
							border: 1px solid #F1E6DF;
							@extend .column;
							position: relative;
							font-weight: 400;
							font-size: 25rpx;
							color: #8D6952;
							margin-left: 20upx;
							margin-top: 20upx;

							.checkbox {
								width: 24rpx;
								height: 24rpx;
								background: #FF2615;
								border-radius: 0rpx 7rpx 0rpx 4rpx;
								position: absolute;
								right: 0;
								top: 0;
							}
						}

						.item-active {
							border-color: #FF2615;
							color: #FF2615;
						}
					}

					.slider-content {
						width: 100%;
						padding: 0 14upx;
						margin-top: 76upx;

						.slider-list {
							width: 100%;
							margin-top: 34upx;
							@extend .row-between;

							.slider-item {
								font-weight: 400;
								font-size: 25rpx;
								color: #B8ACA3;
							}
						}
					}
				}

				.cell-view+.cell-view {
					margin-top: 65upx;
				}

			}

			.button-view {
				width: 100%;
				padding: 0 32upx;
				height: 166upx;
				background: white;
				@extend .row-between;

				.button-item {
					width: calc(100% / 2 - 20upx);
					height: 91rpx;
					@extend .column;
					border: 1px solid #FF2615;
					box-shadow: 0rpx 4rpx 7rpx 0rpx rgba($color:#FF2615, $alpha: 0.1);
					border-radius: 45rpx;
					font-size: 29rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #FF2615;
				}

				.button-active {
					background: linear-gradient( 180deg, #FF7065 0%, #FF2615 100%);
					color: white;
				}
			}

		}
	}
</style>